<page-header title="{{'add-pop-combo'|translate}}">
  <ng-template #breadcrumb>
    <nz-breadcrumb>
      <nz-breadcrumb-item><a [routerLink]="['/pop/list']">{{'pop-list'|translate}}</a></nz-breadcrumb-item>
      <nz-breadcrumb-item>{{'add-pop-combo'|translate}}</nz-breadcrumb-item>
    </nz-breadcrumb>
  </ng-template>
  <ng-template #action>
    <button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>{{'goback'|translate}}</button>
  </ng-template>
</page-header>
<!--<nz-steps [nzCurrent]="current" nzProgressDot [nzDirection]="'horizontal'">-->
  <!--<nz-step nzTitle="Picking"  ></nz-step>-->
  <!--<nz-step nzTitle="Setting"  ></nz-step>-->
  <!--<nz-step nzTitle="Done"  ></nz-step>-->
<!--</nz-steps>-->
<nz-card [nzBordered]="false" *ngIf="step == 0">
  <form nz-form se-container="1" size="compact" gutter="32" [nzLayout]="'inline'">
    <nz-input-group nzSearch [nzSuffix]="suffixButton" style="margin-bottom: 8px; width: 400px">
      <input type="text" name="productCd" [(ngModel)]="q.sap" nz-input placeholder="{{'input_sap'|translate}}">
      <ng-template #suffixButton>
        <button (click)="onScroll(false)" nz-button nzType="primary" nzSearch>{{'search' | translate}}</button>
      </ng-template>
    </nz-input-group>
    <standard-form-row [title]="'Brand'" block style="padding-bottom: 4px;">
      <nz-form-item>
        <nz-form-control>
          <tag-select [expandable]="false">
            <nz-tag *ngFor="let i of brandLines; let idx = index" nzMode="checkable" [nzChecked]="i.status" (nzCheckedChange)="changeBrand($event, idx)">
              {{i.text}}
            </nz-tag>
          </tag-select>
        </nz-form-control>
      </nz-form-item>
    </standard-form-row>
  </form>
</nz-card>
<nz-list *ngIf="step == 0" [nzLoading]="loading" [nzRenderItem]="item" [nzDataSource]="list" [nzGrid]="{gutter: 24, lg: 4, md: 8, sm: 12, xs: 24 }">
  <ng-template #item let-item >
    <nz-list-item >
      <nz-card nzHoverable [nzCover]="cover" [nzActions]="[mp,actionSetting,cart]">
        <ng-template #cover>
          <img *ngIf="item.img" (click)="view(item)" style="min-width:228.75px;max-width:228.75px;margin-bottom: 8px;min-height:132.28px; max-height:132.28px;"
               alt="{{item.sap}}" src="{{imgSuffix + item.img}}">
          <div *ngIf="!item.img"  style="min-width:228.75px;max-width:228.75px;margin-bottom: 8px;min-height:132.28px; max-height:132.28px; text-algin: center; background-color: #e9e9e9">
            <div style="font-size: 22px; text-algin: center; padding-top: 22%;padding-left: 35%">
              {{'no_image' | translate}}
            </div>
          </div>
        </ng-template>
        <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="description">
          <ng-template #nzTitle>
            <p style="font-size: 10px;color: #8e908c;margin: 0" (click)="view(item)">{{item.brand}}</p>
            <a style="font-size: 16px;" (click)="view(item)">{{item.sap}}</a><br>
          </ng-template>
          <ng-template #description>
            {{isBlank(item.sku) ? ' ' : item.sku }}
          </ng-template>
        </nz-card-meta>
        <ng-template #mp>
          <nz-button-group >
            <button nz-button (click)="minCount(item)"><i class="anticon anticon-minus"></i></button>
            <button nz-button (click)="addCount(item)"><i class="anticon anticon-plus"></i></button>
          </nz-button-group>
        </ng-template>
        <ng-template #actionSetting>
        </ng-template>
        <ng-template #cart>
              <nz-badge [nzCount]="item.count">
                <i class="anticon anticon-layout" style="font-size: 28px;"></i>
              </nz-badge>
        </ng-template>
      </nz-card>
    </nz-list-item>
  </ng-template>
</nz-list>
<div *ngIf="hasMore && step == 0" class="loadmore">
  <button nz-button *ngIf="!loading" (click)="onScroll(true)">loading more</button>
  <nz-spin *ngIf="loading && hasMore" [nzSpinning]="loading"></nz-spin>
</div>
<footer-toolbar errorCollect >
  <!--<button nz-button type="primary" nzType="primary"  [nzLoading]="loading" (click)="save()">保存</button>-->
  <div class="steps-action">
    <nz-badge [nzCount]="total" style="margin-right: 20px;margin-bottom: 5px">
      <button nz-button type="primary" nzType="primary"  [nzLoading]="loading" (click)="showAddList()">{{ 'added' | translate}}</button>
    </nz-badge>
    <button nz-button nzType="primary" (click)="pre()" *ngIf="current > 0">
      <span>{{'previous' | translate}}</span>
    </button>
    <button nz-button nzType="primary" (click)="next()" *ngIf="current < 1">
      <span>{{'next' | translate}}</span>
    </button>
    <button nz-button nzType="primary" (click)="save()" *ngIf="current === 1">
      <span>{{'save' | translate}}</span>
    </button>
  </div>
</footer-toolbar>

<nz-drawer [nzWidth]="640" [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Pop Detail" (nzOnClose)="close()">
  <nz-list [nzDataSource]="list" [nzLoading]="loading" [nzRenderItem]="thing">
    <ng-template #thing let-item>
      <nz-list-item [nzContent]="nzContent" [nzActions]="[edit]" *ngIf="item.count != NaN && item.count != 0">
        <ng-template #edit>
          <a (click)="removeItem(item)"><i class="anticon anticon-delete"></i></a>
        </ng-template>
        <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="item.description" [nzAvatar]="nzAvatar">
          <ng-template #nzTitle>
            {{item.sap}}
          </ng-template>
          <ng-template #nzAvatar>
            <nz-avatar [nzSrc]="imgSuffix + item.img" nzSize="large" [nzShape]="'square'"></nz-avatar>
          </ng-template>
        </nz-list-item-meta>
        <ng-template #nzContent>
          <div class="width-md">
            <div class="d-flex text-grey-dark">

              <div class="flex-1">
                {{'qty' | translate}}
                <p><nz-input-number [(ngModel)]="item.count" [nzMin]="1" [nzMax]="20" [nzStep]="1"></nz-input-number></p>
              </div>
              <div class="flex-1">
                {{'operator' | translate}}
                <p><nz-button-group >
                  <button nz-button (click)="minCount(item)"><i class="anticon anticon-minus"></i></button>
                  <button nz-button (click)="addCount(item)"><i class="anticon anticon-plus"></i></button>
                </nz-button-group></p>
              </div>
            </div>
          </div>
        </ng-template>
      </nz-list-item>
    </ng-template>
  </nz-list>
</nz-drawer>


<nz-card nzTitle="{{'base_info' | translate}}" [nzExtra]="extraTemplate" *ngIf="step == 1" [nzBordered]="false">
  <form nz-form>
    <nz-form-item>
      <nz-form-label nzSpan="2" required>{{'sap' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <input nz-input name="sap" [(ngModel)]="pop.sap"  nzTitle="套餐SAP物料号，不填写则默认xxx&xxx显示，xxx为套餐内每个单品SAP物料号" nzPlacement="topCenter" nz-tooltip>
      </nz-form-control>
      <nz-form-label nzSpan="2" >{{'sku_number' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <input nz-input name="sku" [(ngModel)]="pop.sku"  nzTitle="套餐SKU描述，不填写则默认xxx&xxx显示，xxx为套餐内每个单品SKU描述" nzPlacement="topCenter" nz-tooltip>
      </nz-form-control>
      <!--<nz-form-label nzSpan="2" required>{{'description' | translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="3">-->
        <!--<input nz-input name="description" [(ngModel)]="pop.description" nzTitle="套餐中文描述，不填写则默认xxx&xxx显示，xxx为套餐内每个单品的中文描述" nzPlacement="topCenter" nz-tooltip>-->
      <!--</nz-form-control>-->
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="2" nzRequired>{{'brand' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <nz-select style="" [(ngModel)]="pop.brand" name="brand" nzAllowClear  [nzPlaceHolder]="pop.brand" disabled>
          <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
        </nz-select>
      </nz-form-control>
      <!--<nz-form-label nzSpan="2" >{{'gross_weight' | translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="3">-->
        <!--<input nz-input name="grossWeight" [(ngModel)]="pop.grossWeight">-->
      <!--</nz-form-control>-->

      <!--<nz-form-label nzSpan="2" >{{'net_weight' | translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="3">-->
        <!--<input nz-input name="netWeight" [(ngModel)]="pop.netWeight">-->
      <!--</nz-form-control>-->
      <nz-form-label nzSpan="2" >{{'cm_size' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <input nz-input name="cm" [(ngModel)]="pop.cm" nzTitle="例如 : 45*18*20" nzPlacement="topCenter" nz-tooltip>
      </nz-form-control>
      <!--<nz-form-label nzSpan="2" >{{'price_unit' | translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="1">-->
        <!--<nz-select style="" [(ngModel)]="pop.priceUnit" name="priceUnit" nzAllowClear  [nzPlaceHolder]="'请选择价格单位'">-->
          <!--<nz-option [nzLabel]="priceUnit.text" [nzValue]="priceUnit.value" *ngFor="let priceUnit of priceUnits"></nz-option>-->
        <!--</nz-select>-->
      <!--</nz-form-control>-->
    </nz-form-item>
    <nz-form-item *ngIf="showImg">
      <nz-form-label nzSpan="2">{{'img' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <nz-upload class="avatar-uploader"
                   [nzAction]="uploadUrl"
                   nzName="avatar"
                   nzListType="picture-card"
                   [nzShowUploadList]="false"
                   [nzBeforeUpload]="beforeUpload"
                   (nzChange)="handleChange($event)">
          <ng-container *ngIf="!pop.img">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="pop.img" [src]="picUrl" class="avatar">
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-label nzSpan="2">{{'is_on_sale' | translate}}</nz-form-label>
    <nz-form-control>
      <nz-switch name="salestatus" [(ngModel)]="salestatus" nzCheckedChildren="{{'on_sale' | translate}}" nzUnCheckedChildren="{{'off_sale' | translate}}"></nz-switch>
    </nz-form-control>
  </form>
</nz-card>
<ng-template #extraTemplate>
  <button (click)="reset()" nz-button nzType="primary">{{ 'reset' | translate}}</button>
</ng-template>


<nz-drawer id="drawer" [nzVisible]="popItemVisible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SAP:</nz-tag>
    {{popItem.sap}}<br>
  </p>
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SKU:</nz-tag>
    {{popItem.sku}}<br>
  </p>
  <nz-divider nzText="Basic Info" nzOrientation="left" ></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Description:</p> {{popItem.description}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Brand:</p> {{popItem.brand | brandEnPipe | uppercase}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Sap Description:</p> {{popItem.sapDesc}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Exw:</p> {{popItem.priceUnit}}{{popItem.exw}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">CIF:</p>  {{popItem.priceUnit}}{{popItem.cif}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">PriceUnit:</p><nz-tag [nzColor]="popItem.priceUnit === 'USD' ? 'green' : popItem.priceUnit === 'EUR' ? 'red': 'purple'">{{(popItem.priceUnit != '') ? popItem.priceUnit : 'NO' | uppercase}}</nz-tag>
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Qty.:</p>{{popItem.qty}}kg
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">N.W.:</p>{{popItem.netWeight}}kg
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">G.W.:</p>{{popItem.grossWeight}}kg
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Carton Quantity:</p> {{popItem.ctnQty}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Material:</p> {{popItem.material}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Sale Status:</p>
        <nz-tag [nzColor]="'#87d068'" *ngIf="popItem.status === 'normal'">{{popItem.status}}</nz-tag>
        <nz-tag [nzColor]="'red '" *ngIf="popItem.status === 'disabled'">{{popItem.status}}</nz-tag>
      </div>
    </div>
  </div>
  <nz-divider nzText="Image" nzOrientation="left" ></nz-divider>
  <a><img *ngIf="popItem.img" [src]="imgSuffix + popItem.img" class="avatar" (click)="showImage(imgSuffix + popItem.img)"></a>
</nz-drawer>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>
